const dayjs = require('dayjs');
/**
 * UI模块Store
 * 管理界面相关的全局UI状态
 */

import { observable, action, computed } from 'mobx-miniprogram';
import { cacheHelper } from '../../helpers/index.js';

// 缓存配置
const CACHE_KEY = 'UI_STORE';
const CACHE_TIME = 30 * 60; // 30分钟缓存过期

/**
 * UI Store - 管理全局UI状态
 */
export const uiStore = observable({
  // ==== 状态数据 ====
  
  // 页面加载状态
  isLoading: false,
  
  // 主题设置
  theme: 'light', // light, dark
  
  // 全局弹窗状态
  modal: {
    visible: false,
    title: '',
    content: '',
    showCancel: true,
    cancelText: '取消',
    confirmText: '确定',
    success: null
  },
  
  // 顶部通知条
  notification: {
    visible: false,
    type: 'info', // info, success, warning, error
    message: '',
    duration: 3000
  },
  
  // 全局页面设置
  pageSettings: {
    showHeader: true,
    showFooter: true,
    backgroundColor: '#ffffff'
  },
  
  // ==== 计算属性 ====
  
  /**
   * 是否为暗黑主题
   */
  get isDarkTheme() {
    return this.theme === 'dark';
  },
  
  /**
   * 获取当前主题对应的样式类名
   */
  get themeClass() {
    return `theme-${this.theme}`;
  },
  
  // ==== Action方法 ====
  
  /**
   * 初始化Store
   */
  init: action(function() {
    // 从缓存加载数据
    this.loadFromCache();
  }),
  
  /**
   * 重置状态
   */
  reset: action(function() {
    this.isLoading = false;
    this.theme = 'light';
    this.modal = {
      visible: false,
      title: '',
      content: '',
      showCancel: true,
      cancelText: '取消',
      confirmText: '确定',
      success: null
    };
    this.notification = {
      visible: false,
      type: 'info',
      message: '',
      duration: 3000
    };
    this.pageSettings = {
      showHeader: true,
      showFooter: true,
      backgroundColor: '#ffffff'
    };
  }),
  
  /**
   * 设置加载状态
   */
  setLoading: action(function(status) {
    this.isLoading = status;
  }),
  
  /**
   * 设置主题
   */
  setTheme: action(function(theme) {
    this.theme = theme;
    this._cacheData();
  }),
  
  /**
   * 切换主题
   */
  toggleTheme: action(function() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
    this._cacheData();
  }),
  
  /**
   * 显示模态框
   */
  showModal: action(function(options) {
    this.modal = {
      visible: true,
      title: options.title || '',
      content: options.content || '',
      showCancel: options.showCancel !== false,
      cancelText: options.cancelText || '取消',
      confirmText: options.confirmText || '确定',
      success: options.success || null
    };
  }),
  
  /**
   * 隐藏模态框
   */
  hideModal: action(function() {
    this.modal.visible = false;
  }),
  
  /**
   * 显示通知
   */
  showNotification: action(function(type, message, duration = 3000) {
    this.notification = {
      visible: true,
      type,
      message,
      duration
    };
    
    // 自动关闭
    if (duration > 0) {
      setTimeout(() => {
        this.hideNotification();
      }, duration);
    }
  }),
  
  /**
   * 隐藏通知
   */
  hideNotification: action(function() {
    this.notification.visible = false;
  }),
  
  /**
   * 设置页面设置
   */
  setPageSettings: action(function(settings) {
    this.pageSettings = {
      ...this.pageSettings,
      ...settings
    };
    this._cacheData();
  }),
  
  /**
   * 缓存数据
   */
  _cacheData: action(function() {
    const cacheData = {
      theme: this.theme,
      pageSettings: this.pageSettings,
      timestamp: dayjs().valueOf()
    };
    
    cacheHelper.set(CACHE_KEY, cacheData, CACHE_TIME);
  }),
  
  /**
   * 从缓存加载数据
   */
  loadFromCache: action(function() {
    const cache = cacheHelper.get(CACHE_KEY);
    
    if (cache) {
      if (cache.theme) this.theme = cache.theme;
      if (cache.pageSettings) this.pageSettings = cache.pageSettings;
      return true;
    }
    
    return false;
  }),
  
  /**
   * 清除缓存
   */
  clearCache: action(function() {
    cacheHelper.remove(CACHE_KEY);
  })
});

// 导出其他UI组件和常量可以在这里添加 